<template>
	<view class="list-right">
		<view class="author-img">
			<image class="img" src="../static/img/002.jpg" mode=""></image>
			<view class="add iconfont icon-jiahao"
			 v-show="show"
			 @click="hide">
			</view>
		</view>
		<view class="iconfont icon-aixin right-box" :style="color"
		@click="changeColor"
		>
		</view>
		<view class="num">
			{{item.loveNumber}}
		</view>
		<view class="iconfont icon-pinglun right-box">
		</view>
		<view class="num">
			{{item.commentNumber}}
		</view>
		<view class="iconfont icon-fenxiang right-box">
		</view>
		<view class="num">
			{{item.shareNumber}}
		</view>
		<view class="around">
			<image class="img" src="../static/img/001.jpg" mode=""></image>
		</view>
	</view>
</template>
  
<script>
	export default {
		props:['item'],
		name:"list-right",
		data() {
			return {
				show:true,
				color:""
			};
		},
		methods:{
			hide(){
				this.show=false
			},
			changeColor(){
				this.color=this.color===''?"color:red":''
			},
			change(){
				this.color="color:red;"
			}
		}
	}
</script>

<style>
.img{
	height: 50px;
	width: 50px;
	border-radius: 50%;
}
.list-right{
	width: 50px;
	margin: 0 auto;
}
.author-img{
	height: 50px;
	width: 50px;
	border-radius: 50%;
	border: 1px solid #FFFFFF;
	position: relative;
}
.right-box{
	width: 50;
	height: 40px;
	margin-top: 13px;
	text-align: center;
	line-height: 40px;
	color: white;
	font-size: 33px;
}
.num{
	font-size: 10px;
	text-align: center;
	color: white;
}
.around{
	margin-top: 15px;
	animation: rotate 1.5s linear 0.2s infinite;
	height: 50px;
	width: 50px;
}
.add{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	bottom: -9px;
	left: 16px;
	text-align: center;
	line-height: 18px;
	color: white;
	font-size:10px ;
}



@keyframes rotate{
	0%{
		transform: rotate(0deg)
	}
	100%{
		transform: rotate(360deg)
	}
}
</style>
